<template>
	<view>
		<view class="buildList" v-if="list.length > 0">
			<view class="buildBox" v-for="(item, index) in list" :key="index">
				<view class="buildTitle" v-if="queryForm.room_type == 1">
					<view class="title">
						{{ item.room_group_name }}
					</view>
				</view>
				<view class="buildTitle" v-else-if="queryForm.room_type == 2" @click="homeMore(item)">
					<view class="title">
						{{ item.room_group_name }}
					</view>
					<view class="more">
						<uni-icons type="list" size="16" color="#2979ff"></uni-icons>
					</view>
				</view>
				<view class="buildTitle" v-else-if="queryForm.room_type == 3" @click="buildMore(item)">
					<view class="title">
						{{ item.room_group_name }}
					</view>
					<view class="more">
						<uni-icons type="list" size="16" color="#2979ff"></uni-icons>
					</view>
				</view>
				<uni-row gutter="14">
					<uni-col :span="8" v-for="itm in item.room_group_list" :key="itm.id">
						<view class="roomBox" hover-class="hoverColor" :class="itm.room_status == 1 ? 'hasRent' : ''" @click="clickRoom(itm)">
							<view class="book" v-if="itm.book_status == 6">定</view>
							<view class="name">
								{{ itm.room_no }}
							</view>
							<view class="dirty" v-if="itm.dirty_status == 2">
								<uni-icons custom-prefix="iconfont" type="icon-dasao" size="14" color="#f5a625"></uni-icons>
							</view>
						</view>
					</uni-col>
				</uni-row>
			</view>
		</view>
		<view class="empty" v-else>
			<image class="image" src="@/static/img/empty.png" mode="aspectFit"></image>
			<view class="emptyWord">暂无数据</view>
		</view>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog
				ref="inputClose"
				mode="input"
				:title="roomForm.room_group_name"
				:value="roomForm.room_no"
				placeholder="请输入"
				@confirm="dialogInputConfirm"
			></uni-popup-dialog>
		</uni-popup>
		<!-- 底部操作菜单 -->
		<view v-if="isShow">
			<view class="sheetbg" @click="closeSheet"></view>
			<uni-transition mode-class="slide-bottom" class="sheet" :show="isShow">
				<view class="sheetTitle">
					<view class="title">{{ detail.room_address }}</view>
					<view class="desc" v-if="detail.group_name">{{ detail.group_name }}</view>
				</view>
				<view class="sheetItem" hover-class="hoverClass" v-if="detail.room_status == 0" @click="goRent(detail)">办理入住</view>
				<view class="sheetItem" hover-class="hoverClass" v-else-if="detail.room_status == 1" @click="goRentDetail(detail.rent_sn)">入住详情</view>
				<view class="sheetItem" hover-class="hoverClass" @click="goBookDetail(detail.id)">预定管理</view>
				<view class="sheetItem" hover-class="hoverClass" @click="godevice(detail)">关联设备</view>
				<view class="sheetItem" hover-class="hoverClass" @click="goRoomDetail(detail.id)">房间详情</view>
				<view class="sheetItem" hover-class="hoverClass" v-if="detail.dirty_status == 0" @click="toSetDirty(detail.id)">设为脏房</view>
				<view class="sheetItem" hover-class="hoverClass" v-else-if="detail.dirty_status == 2" @click="toSetClean(detail.id)">设为净房</view>
				<view class="actionBottom">
					<view class="bottom-top"></view>
					<view class="bottom-btn" hover-class="hoverClass" @click="closeSheet">取消</view>
				</view>
				<view class="safeArea" :style="{ height: safeArea + 'rpx' }"></view>
			</uni-transition>
		</view>
	</view>
</template>

<script>
import api from '@/api/api';
export default {
	name: 'roomList',
	props: ['query'],
	data() {
		return {
			list: [],
			queryForm: {},
			queryNum: 0,
			detail: {},
			isShow: false,
			safeArea: 0,
			roomForm: {
				room_group_name: '',
				room_no: ''
			}
		};
	},
	watch: {
		query: {
			handler(newValue) {
				this.queryForm = newValue;
				this.getRoom();
			},
			deep: true
		}
	},
	mounted() {
		this.safeArea = getApp().globalData.safeArea;
		this.queryForm = this.query;
	},
	methods: {
		closeSheet() {
			this.isShow = false;
		},
		clickRoom(item) {
			this.detail = item;
			this.isShow = true;
		},
		homeMore(item) {
			const _this = this;
			uni.showActionSheet({
				itemList: ['添加房间', '编辑整套', '删除整套'],
				success: function (res) {
					if (res.tapIndex == 0) {
						_this.addRoom(item);
					} else if (res.tapIndex == 1) {
						uni.navigateTo({
							url:
								'/pages/add/editHome?home_id=' + item.home_id + '&group_id=' + item.group_id + '&community_id=' + item.community_id + '&home_name=' + item.home_name
						});
					} else if (res.tapIndex == 2) {
						_this.delHome(item.home_id);
					}
				}
			});
		},
		buildMore(item) {
			const _this = this;
			uni.showActionSheet({
				itemList: ['添加房间', '删除整层'],
				success: function (res) {
					if (res.tapIndex == 0) {
						_this.addRoom(item);
					} else if (res.tapIndex == 1) {
						_this.delFloor(item.floor_id);
					}
				}
			});
		},
		addRoom(row) {
			this.roomForm.room_group_name = row.room_group_name;
			this.roomForm.room_type = row.room_type;
			if (row.room_type == '2') {
				this.roomForm.home_id = row.home_id;
				this.roomForm.community_id = row.community_id;
				this.roomForm.group_id = row.group_id;
			} else if (row.room_type == '3') {
				this.roomForm.building_id = row.building_id;
				this.roomForm.floor_id = row.floor_id;
				this.roomForm.group_id = row.group_id;
			}
			this.$refs.inputDialog.open();
		},
		dialogInputConfirm(e) {
			this.roomForm.room_no = e;
			uni.showLoading({
				title: '添加中...'
			});
			api.homeAdd(this.roomForm).then((res) => {
				if (res.data.is_success) {
					uni.hideLoading();
					uni.showToast({
						title: '添加成功',
						icon: 'none'
					});
					this.$refs.inputDialog.close();
					this.getRoom();
				}
			});
		},
		delHome(id) {
			const _this = this;
			uni.showModal({
				title: '提示',
				content: '确定要删除整套房间吗？',
				success: function (res) {
					if (res.confirm) {
						api.homeDel({ home_id: id }).then((data) => {
							if (data.data.is_success) {
								uni.showToast({
									title: '操作成功！'
								});
								_this.getRoom();
							}
						});
					}
				}
			});
		},
		delFloor(id) {
			const _this = this;
			uni.showModal({
				title: '提示',
				content: '确定要删除整层房间吗？',
				success: function (res) {
					if (res.confirm) {
						api.floorDel({ floor_id: id }).then((data) => {
							if (data.data.is_success) {
								uni.showToast({
									title: '操作成功！'
								});
								_this.getRoom();
							}
						});
					}
				}
			});
		},
		setBuild() {
			uni.navigateTo({
				url: '/pages/add/setBuild'
			});
		},
		goRent(item) {
			this.closeSheet();
			uni.navigateTo({
				url: '/pages/add/rent?id=' + item.id + '&name=' + item.room_address
			});
		},
		goRentDetail(sn) {
			this.closeSheet();
			uni.navigateTo({
				url: '/pages/details/rent?sn=' + sn
			});
		},
		goRoomDetail(id) {
			this.closeSheet();
			uni.navigateTo({
				url: '/pages/details/room?id=' + id
			});
		},
		goBookDetail(id) {
			this.closeSheet();
			uni.navigateTo({
				url: '/pages/rent/bookList?id=' + id
			});
		},
		godevice(item) {
			this.closeSheet();
			uni.navigateTo({
				url: '/pageA/lock/roomLock?id=' + item.id + '&group=' + item.group_id
			});
		},
		toSetDirty(id) {
			api.setDirty({ room_id: id }).then((res) => {
				if (res.data.is_success) {
					uni.showToast({
						title: '设置成功',
						icon: 'none'
					});
					this.closeSheet();
					this.getRoom();
				}
			});
		},
		toSetClean(id) {
			api.setClean({ room_id: id }).then((res) => {
				if (res.data.is_success) {
					uni.showToast({
						title: '设置成功',
						icon: 'none'
					});
					this.closeSheet();
					this.getRoom();
				}
			});
		},
		getRoom() {
			this.queryNum++;
			uni.showLoading({
				title: '加载中...'
			});
			let a = this.queryNum;
			var queryData = Object.assign({}, this.queryForm);
			delete queryData.updateNum;
			if (queryData.building_id == '0' || queryData.building_id == '') {
				delete queryData.building_id;
			}
			if (queryData.community_id == '') {
				delete queryData.community_id;
			}
			if (queryData.group_id == '') {
				delete queryData.group_id;
			}
			if (queryData.room_status == '') {
				delete queryData.room_status;
			}
			if (queryData.keyword == '') {
				delete queryData.keyword;
			}
			if (queryData.floor_id == '') {
				delete queryData.floor_id;
			}
			api.roomList(queryData).then((res) => {
				if (a == this.queryNum) {
					this.list = res.data.rooms_data;
					this.$emit('getTotal', res.data.rooms_total);
					uni.hideLoading();
				}
			});
		}
	}
};
</script>

<style lang="scss">
.buildList {
	padding: 30rpx 20rpx 100rpx 20rpx;
	.buildBox {
		margin-bottom: 20rpx;
		.buildTitle {
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			.title {
				font-size: 24rpx;
				background: #a8a8a8;
				color: #f6f6f6;
				padding: 5rpx 20rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}
			.more {
				height: 42rpx;
				width: 42rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.roomBox {
			background: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			height: 120rpx;
			padding: 16rpx;
			margin-bottom: 14rpx;
			position: relative;
			.name {
				font-size: 24rpx;
				font-weight: bolder;
			}
			&.hasRent {
				background: #e3efff;
			}
			.book {
				position: absolute;
				width: 28rpx;
				height: 28rpx;
				font-size: 22rpx;
				top: 6rpx;
				right: 6rpx;
				background: #f5a625;
				color: #fff;
				text-align: center;
				line-height: 28rpx;
				border-radius: 100%;
			}
			.dirty {
				position: absolute;
				left: 6rpx;
				bottom: 6rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
}

.sheetbg {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999998;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
}
.sheet {
	box-sizing: border-box;
	width: 100%;
	border-radius: 32rpx 32rpx 0 0;
	overflow: hidden;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999999;
	.sheetTitle {
		width: 100%;
		text-align: center;
		padding: 10rpx 0;
		border-bottom: 16rpx solid #f5f5f5;
		background: #fff;
		.title {
			font-size: 32rpx;
			line-height: 64rpx;
		}
		.desc {
			color: #969799;
			font-size: 28rpx;
		}
	}
	.sheetItem {
		width: 100%;
		padding: 24rpx 0;
		font-size: 32rpx;
		background: #fff;
		cursor: pointer;
		text-align: center;
		border-bottom: 1rpx solid #f5f5f5;
	}
	.actionBottom {
		width: 100%;

		.bottom-top {
			display: block;
			height: 16rpx;
			background: #f7f8fa;
		}

		.bottom-btn {
			cursor: pointer;
			width: 100%;
			text-align: center;
			padding: 24rpx 0;
			font-size: 32rpx;
			background: #fff;
		}
	}

	.safeArea {
		width: 100%;
		background: #fff;
	}
}
</style>
